<template>
	<view>
		<view class="image">
			<img src='../../static/Slice 25@2x.png' />
		</view>
		<view class="text">
			下午好！
		</view>
		<view>
			<input class="uni-easyinput" v-model="form.username" placeholder="请输入手机号"></uni-easyinput>
		</view>
		<view>
			<input class="uni-easyinput" v-model="form.smsCode" placeholder="请输入短信验证码"></uni-easyinput>
			<text v-if="yamval==1" class="yzm" @click="yamFn()">获取验证码</text>
			<text v-if="yamval==2" class="yzm aaa" @click="yamFn()"><text>45</text>秒后重新获取</text>
		</view>

		<view class="protocol">
			<view class="protocol_icon">
				<img v-if="isSelect" src="../../static/Select.png" @click="isSelect = !isSelect" />
				<img v-else src="../../static/NoSelect.png" @click="isSelect = !isSelect" />
			</view>
			<view class="protocol_text">我已阅读并同意<text class="hetong" @click="contractFn('bottom')">《借款合同及相关协议》</text>
			</view>
		</view>

		<view class="btn" @click="LogInNow">立即登录</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form:{
					username: '',
					smsCode: '',
				},
				yamval: 1,
				isSelect: true,
			}
		},
		created(){
			console.log(this.$store.state.m_cart.LoginStatus)
			console.log(this.$store.state.m_cart)
		},
		methods: {
			async yamFn() {
				this.yamval = 2
				console.log(this.phone)
				const res = await uni.$http.post('common/app/login/sms',{username:this.phone})
			},
			async LogInNow(){
				const res = await uni.$http.post('common/app/login',this.form)
				if(res.data.code == 0){
				this.$store.commit('m_cart/GET_USERNAME', this.form.username);  
				this.$store.commit('m_cart/GET_REFRESSHTOKEN', res.data.data.refreshToken);  
				this.$store.commit('m_cart/GET_TOEKN', res.data.data.token);  
				// 如果是1的话代表登录过了 首页的马上登录隐藏掉
				this.$store.commit('m_cart/GET_LOGINSTATUS', 1);  
					uni.switchTab({  
					  url: '/pages/message/message'  
					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-easyinput {
		width: 598rpx;
		height: 100rpx;
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		border: 1rpx solid #979797;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding-left: 40rpx;

	}

	.yzm {
		position: fixed;
		top: 645rpx;
		left: 510rpx;
		z-index: 99;
		font-size: 28rpx;
		color: #2253FF;

		text {
			color: #2253FF;
		}
	}

	.aaa {
		left: 470rpx;
		color: #999999;
	}

	.image {
		width: 144rpx;
		height: 144rpx;
		background: #2253FF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		margin: 0 auto;
		margin-top: 66rpx;
		margin-bottom: 42rpx;

		img {
			width: 100%;
		}
	}

	.text {
		width: 224rpx;
		height: 78rpx;
		text-align: center;
		font-weight: bold;
		font-size: 56rpx;
		margin: 0 auto;
		margin-bottom: 80rpx;
		padding-left: 45rpx;
	}

	.protocol {
		display: flex;
		justify-items: center;
		align-items: center;
		margin-left: 40rpx;

		margin-top: 60rpx;


		.protocol_text {
			/* margin-left: -800rpx; */
		}

		.protocol_icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;

			img {
				width: 100%;
			}
		}

		.hetong {
			color: #2253FF;
		}
	}

	.btn {
		width: 638rpx;
		height: 100rpx;
		background: #2253FF;
		border-radius: 126rpx 126rpx 126rpx 126rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		line-height: 100rpx;
		margin-top: 60rpx;
	}
</style>